<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>游戏大厅</title>
  <link rel="stylesheet" href="css/common.css">
  <link rel="stylesheet" href="css/game_hall.css">
  <script src="js/jquery.min.js"></script>
  <style>
    /*input::-webkit-input-placeholder {*/
    /*  color: #cccccc;*/
    /*  font-size: 14px;*/
    /*}*/


  </style>
</head>

<body>
<!-- 导航栏 -->
<div class="nav">
  <a href="#" class="title">分歧终端机</a>
  <!-- 用来占据中间位置 -->
  <span class="spacer"></span>

  <a href="game_hall.html">游戏大厅</a>
<!--  <a href="client.html">websocketsession测试</a>-->
<!--  <a href="#">观战</a>-->
<!--  <a href="#">回放</a>-->
  <a href="index.html">注销</a>
  <!-- <a href="#">注销</a> -->
</div>
<!--整个页面的容器元素-->
  <div class = "container">
    <!--  这个div在container中是出于垂直水平居中这样的位置  -->
    <div>
        <!--   展示用户信息   -->
      <div id="screen">
        <h2></h2>
        <div></div>
      </div>
      <!--   匹配按钮   -->
      <div id="match-button" >开始匹配</div>
      <div id="create-button">创建房间</div>
      <div id="join-button">加入房间</div>
    </div>
  </div>
<script>


    <!--获取用户信息-->
  jQuery.ajax({
    type: 'get',
    url: "/userInfo",
    success: function (body) {
      let screenDiv = document.querySelector("#screen");
      screenDiv.innerHTML = "<h2>" + "你好！" + body.data.username + "</h2>" +"<div> <span>比赛场次:" + body.data.totalCount + "|获胜场数:" + body.data.winCount + "</span> </div>";
    },
    error: function() {
      alert("获取用户信息失败,请重新登录!");
      location.replace("/index.html");

    }
  });


    //此处初始化websocket,并且实现前端的匹配逻辑
    let websocketUrl = 'ws://'+ location.host +'/findMatch';
    let websocket = new WebSocket(websocketUrl)
    //匹配按键添加点击事件
    let matchButton = document.querySelector("#match-button");
    let createButton = document.querySelector("#create-button");
    let joinButton = document.querySelector("#join-button");

    websocket.onopen = function () {
      console.log("连接成功");
    }

    websocket.onclose = function () {
      console.log("下线");

    }

    websocket.onerror = function () {
      console.log("连接错误");

    }

    //监听页面关闭事件,在页面关闭之前执行websocket的close方法
    window.onbeforeunload = function () {
      websocket.close();
    }

    //推送机制的接收
    websocket.onmessage = function (e) {
      console.log("收到推送");
      //处理服务器返回的响应数据,这个响应就是正对"开始匹配" / "停止匹配"来对应
      //解析得到的响应对象,返回的数据是一个JSON字符串,解析成js对象
      let resp= JSON.parse(e.data);
      if(!resp.ok) {
        console.log("游戏大厅中接受到了失败响应！" + "失败原因:" + resp.reason);
        alert(resp.reason);
        location.replace("/index.html");
        return;
      }
      if(resp.message == "startMatch") {
        //开始匹配请求发送成功
        console.log("进入匹配队列成功")
        matchButton.innerHTML = "匹配中...(点击停止)";
      } else if(resp.message == 'stopMatch') {
        //结束匹配请求发送成功
        console.log("离开匹配队列成功")
        matchButton.innerHTML = "开始匹配";
      } else if(resp.message == 'matchSuccess') {
        //已经匹配到对手
        console.log("匹配到游戏对手,进入游戏房间");
        location.replace("/game_room.html");
      }  else {
        console.log("收到了非法的响应！" + "message：" + resp.message);
      }
    }


    matchButton.onclick = function () {
      //确认websocket是否建立成功
      if (websocket.readyState == websocket.OPEN) {
        //如果readyState出于open状态,就是连接成功状态
        //这里发送的数据有两种可能 : 1、开始匹配 2、取消匹配
        if(matchButton.innerHTML == "开始匹配") {
          console.log("开始匹配");
          //JSON.stringify() 将JS对象转换成json格式
          websocket.send(JSON.stringify(
                  {
                    message: 'startMatch',
                  }));
        } else if(matchButton.innerHTML == "匹配中...(点击停止)") {
          console.log("停止匹配");
          websocket.send(JSON.stringify(
                  {
                    message: 'stopMatch',
                  }));
        }
      } else {
        //连接异常状态
        alert("当前您的连接已经断开,请重新登录");
        window.location.host("/index.html");
      }

    }

    createButton.onclick = function () {
      window.location=("/create.html");

    }



    joinButton.onclick = function () {
      window.location=("/join.html");

    }

</script>
</body>

</html>